<template>
    <div class="common-layout" style="background-color:#fff;margin: 0;padding: 0;">
        <el-container style="width: 1200px;margin: 0 auto;">
            <el-header >
                <!--顶部导航栏-->
                <el-menu mode="horizontal" background-color="block" text-color="#fff"
                         active-text-color="#ff0" default-active="7" style="height: 60px;background-color: #282c30;position: relative;">
                  <el-menu-item index="1">发现音乐</el-menu-item>
                  <el-menu-item index="2">我的音乐</el-menu-item>
                  <el-menu-item index="3">关注</el-menu-item>
                  <el-menu-item index="4">商城</el-menu-item>
                  <el-menu-item index="5">音乐人</el-menu-item>
                  <el-menu-item index="6">云推歌</el-menu-item>
                    <el-menu-item index="7" >搜素
                        <el-input type="text" placeholder="搜索音乐" style="width:80%;margin-left: 20px"></el-input>
                    </el-menu-item>
                  <el-menu-item index="8" style="position: absolute ;right: 0;">
                   <el-button type="primary" style="background-color: transparent;border-color:transparent">登录</el-button>
                  </el-menu-item>
                  <el-menu-item index="8" style="position: absolute ;right: 100px;">
                    <el-button type="success" style="background-color: transparent;border-color:transparent ">注册</el-button>
                  </el-menu-item>
                </el-menu>
            </el-header>

            <el-main>
                <!--4.轮播图-->
                <el-carousel :interval="5000" type="card" height="200px">

                    <el-carousel-item v-for="url in bannerArr">
                        <img :src="url" style="width:100%;height:100%;">
                    </el-carousel-item>

                </el-carousel>
            <el-header style="margin: 0;padding: 0;">
                <!--二级导航栏-->
                <el-menu mode="horizontal" background-color="red" text-color="#fff"
                         active-text-color="#000" default-active="6" style="background-color: red;position: relative;">
                  <el-menu-item index="1">推荐</el-menu-item>
                  <el-menu-item index="2">排行榜</el-menu-item>
                  <el-menu-item index="3">歌单</el-menu-item>
                  <el-menu-item index="4">主播电台</el-menu-item>
                  <el-menu-item index="5">歌手</el-menu-item>
                  <el-menu-item index="6">新歌上架</el-menu-item>

                </el-menu>
            </el-header>

        <!-- 歌单列表-->
        <el-row :gutter="5">
          <el-col :span="6" v-for="z in productArr" style="margin:10px 0;">
            <el-card style="padding-bottom:10px;background-color:#f4f4f4;">
              <img :src="z.url" style="width:100%;height:100%;">
              <p>{{ z.title }}</p>
              <div>
                <p style="float:left;color:black;font-size: 10px;margin:10px">
                  <el-icon><Headset /></el-icon>
                  播放量&nbsp;:&nbsp;&nbsp;{{ z.plays }}
                  <span style="padding-left:90px;float: right;font-size: 10px;font-weight: bold">
                   类型&nbsp;:&nbsp;&nbsp;{{ z.saleCount }}
                 </span>
                </p>
              </div>
            </el-card>
          </el-col>
        </el-row>

<!--              分割线-->
              <div style="width: 100%;height:50px; background-color:#ffffff">
               <p style="line-height: 24px">榜单&nbsp;&nbsp;
                 <span>  <el-icon style="display: inline-block; font-size: 20px; vertical-align: middle;"><Histogram /></el-icon ></span>
               </p>
                <hr>

              </div>
              <!--     排行榜单-->
              <el-row :gutter="5">
                <el-col :span="6" v-for="z in listArr" style="margin:10px 0;">
                  <el-card style="padding-bottom:10px;background-color:#f4f4f4;">
                    <div style="position: relative ;box-sizing: border-box;width: 250px ;padding: 0 25px" >   <img :src="z.imgurl" style="width:60%;height:60%;margin-bottom: 15px ">
                      <div style="display: inline-block">
                        <el-icon style="margin-left:20px ;display: inline-block;position: absolute;top:25%;font-size: 30px ;color:#8f8f8f"><VideoPlay /></el-icon>
                        <el-icon style="margin-left:20px ;display: inline-block;position: absolute;top:60%;font-size: 30px ;color:#8f8f8f"><FolderAdd /></el-icon>

                      </div>

                    </div>

                    <el-table :data="z.content"  stripe style="width: 100%":header-cell-style="{ textAlign: 'center' }" >
                      <el-table-column type="index" label="排名" width="60px"></el-table-column>
                      <el-table-column prop="content" label="歌曲" width="170" />
                    </el-table>




                  </el-card>
                </el-col>
              </el-row>
<!--              提交反馈-->
              <hr>
              <el-row style="background-color: #f2f2f2;">
                <el-col :sm="12" :lg="6">
                  <el-result
                      icon="success"
                      title="订阅"
                      sub-title="关注公众号"
                  >
                    <template #extra>
                      <el-button type="primary">反馈</el-button>
                    </template>
                  </el-result>
                </el-col>
                <el-col :sm="12" :lg="6">
                  <el-result
                      icon="warning"
                      title="建议"
                      sub-title="有关于本站的建议"
                  >
                    <template #extra>
                      <el-button type="primary">反馈</el-button>
                    </template>
                  </el-result>
                </el-col>
                <el-col :sm="12" :lg="6">
                  <el-result
                      icon="error"
                      title="疑难问题"
                      sub-title="连线客服可以反馈你的问题"
                  >
                    <template #extra>
                      <el-button type="primary">Back</el-button>
                    </template>
                  </el-result>
                </el-col>
                <el-col :sm="12" :lg="6">
                  <el-result icon="info" title="其他问题">
                    <template #sub-title>
                      <p>请后台留言</p>
                    </template>
                    <template #extra>
                      <el-button type="primary">反馈</el-button>
                    </template>
                  </el-result>
                </el-col>
              </el-row>



            </el-main>
      <!--尾部-->
      <el-footer style="margin: 0;padding: 0;background-color:#282c30;color:#666;height:200px;padding-top:40px; overflow:hidden;">
        <p style="font-weight: bold">制作人:余镜饶、邹银康、戴怡波</p>
        <p>本项目由米哈游赞助、逆熵赞助、还有各位朋友赞助</p>



        <img src="/img/naxida3.jpg" style="width: 10%;float: left;padding:revert">
        <img src="/img/naxida3.jpg" style=" width: 10%;float: right; padding: revert">
      </el-footer>
    </el-container>
  </div>


    <el-backtop :right="100" :bottom="100" />


</template>


<script setup>
import {ref} from "vue";
//1.准备轮播图数组
const bannerArr = ref(["/img/lun1.jpg", "/img/lun2.jpg", "/img/lun3.jpg","img/lun4.jpg","img/lun5.jpg","img/lun6.jpg"]);
//2.准备商品对象数组
const productArr = ref([
        {title: "青春回忆录：这里收藏了那些陪伴我们走过青涩岁月的歌曲，每一首都像是时光机，带我们回到那个纯真的年代。", plays: 1700, url: "/img/kp/1.jpg", saleCount: "青春"},
        {title: "治愈系轻音乐：精选轻音乐，为你疲惫的心灵带来一丝宁静，让旋律带走你的烦恼，留下平静与安宁。", plays: 1700, url: "/img/kp/2.jpg",  saleCount: "治愈"},
        {title: "华语流行金曲榜：集结了华语乐坛的流行金曲，每一首都曾红遍大街小巷，让你回味那些年的流行风潮。", plays: 1700, url: "/img/kp/3.jpg", saleCount:  "流行"},
        {title: "电影原声精选：这里有来自世界各地经典电影的原声音乐，每一首都承载着一段动人的故事，让你在音乐中重温电影情节。", plays: 1700, url: "/img/kp/4.jpg", saleCount:"电影"},
        {title: "摇滚之夜：摇滚不死，激情不灭！这里有最热血的摇滚乐，带你感受摇滚音乐的独特魅力。", plays: 1700, url: "/img/kp/5.jpg", saleCount:"摇滚"},
        {title: "古风雅韵：穿越千年的古风音乐，诉说着一段段古老的故事，带你领略中国传统文化的韵味。", plays: 1700, url: "/img/kp/6.jpg", saleCount:"古风"},
        {title: "爵士风情：沉浸在爵士乐的优雅与自由中，让音乐带你领略不同地域的爵士风情。", plays: 1700, url: "/img/kp/7.jpg", saleCount: "爵士"},
        {title: "动漫音乐宝藏：精选动漫音乐，带你重温那些年的动漫时光，让旋律唤醒你的二次元记忆。", plays: 1700, url: "/img/kp/8.jpg", saleCount: "动漫"},
        {title: "民谣在路上：民谣歌手们用歌声诉说着生活的故事，这里收录了那些触动心灵的民谣佳作。", plays: 1700, url: "/img/kp/9.jpg", saleCount: "民谣"},
        {title: "韩语流行热榜：汇集韩国流行乐坛的最新热门歌曲，让你感受韩流的魅力。", plays: 1700, url: "/img/kp/10.jpg", saleCount: "韩语"},
        {title: "古典音乐殿堂：这里有世界著名古典音乐家的作品，带你领略古典音乐的深邃与美丽。", plays: 1700, url: "/img/kp/11.jpg", saleCount: "古典"},
        {title: "睡前轻音疗愈：精选轻柔舒缓的音乐，为你的夜晚带来一丝温暖，助你安然入眠。", plays: 1700, url: "/img/kp/12.jpg", saleCount: "轻音"},
    ])
const listArr =ref([
    {imgurl:"/img/kp/13.jpg",content:[{content:"薛之谦/张靓颖《可》"},{content:"米津玄師《M八七》"},{content:"周杰伦 《爱在西元前》"},{content:"告五人《唯一》"}]},
    {imgurl:"/img/kp/14.jpg",content:[{content:"薛之谦/张靓颖《可》"},{content:"米津玄師《M八七》"},{content:"周杰伦 《爱在西元前》"},{content:"告五人《唯一》"}]},
    {imgurl:"/img/kp/15.jpg",content:[{content:"薛之谦/张靓颖《可》"},{content:"米津玄師《M八七》"},{content:"周杰伦 《爱在西元前》"},{content:"告五人《唯一》"}]},
    {imgurl:"/img/kp/16.jpg",content:[{content:"薛之谦/张靓颖《可》"},{content:"米津玄師《M八七》"},{content:"周杰伦 《爱在西元前》"},{content:"告五人《唯一》"}]},


])


</script>

<style scoped>
p {
  /*强制文字不换行*/
  white-space: nowrap;
  /*超出的文字部分隐藏*/
  overflow: hidden;
  /*溢出文字部分替换为省略号*/
  text-overflow: ellipsis;
}
img:hover{
  transform: scale(105%);

}
img{
  transition: 1s;
}

</style>